<template>
  <div>
    <Select
      ref="selectRef"
      filterable
      remote
      multiple
      placeholder="经销商选择"
      :max-tag-count="tagCount || 2"
      :value="agentId"
      @on-open-change="selectChange"
      @on-change="valueChanged">
      <Option v-for="item in agents" :value="item.id" :key="item.id">{{ item.agentName }}</Option>
    </Select>
  </div>
</template>
<script lang='ts'>
  import {Component, Prop, Vue} from 'vue-property-decorator';
  import {AgentSelectorBloc} from '@/component/bloc/AgentSelectorBloc';
  import {isEmpty} from '@/base/util/Strings';

  @Component
  export default class UserSelector extends Vue {
    @Prop({type: Array})
    readonly agentId!: Array<number>;
    @Prop({type: Array})
    readonly agents!: Array<object>;

    @Prop({type: Number})
    readonly tagCount!: number;

    bloc = new AgentSelectorBloc();

    // mounted() {
    //   this.bloc.getAllAngent(1, 1000, 'DESC');
    // }

    valueChanged(value) {
      this.$emit('on-change', value);
    }

    selectChange() {
      const selectRef: any = this.$refs['selectRef'];
      if (selectRef.values) {
        selectRef.query = '';
      }
      if (isEmpty(selectRef.query)) {
        this.bloc.getAllAngent(1, 1000, 'DESC');
      }
    }
  }
</script>

<style lang='less'>

</style>
